<template>
  <div class="app-container">
    <el-drawer title="发货通知单详情" :visible.sync="showFlag" size="80%" :append-to-body="true">
      <template v-slot:title>
        <span class="titleDiv">发货通知单详情</span>
      </template>
      <div style="padding: 0 20px;">
        <el-tag size="large" style="font-size: 20px;">基本信息</el-tag>
        <hr />
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>单据编号：</span>
              <span>{{ form.fbillno || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>单据状态：</span>
              <span>
                <dict-tag :options="dict.type.mes_workorder_status" :value="form.fdocumentStatus" />
              </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>客户：</span>
              <span>{{ form.clientName || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>日期：</span>
              <span>{{ form.fdate || '--' }}</span>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>创建日期：</span>
              <span>{{ form.fcreateDate || '--' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>审核日期：</span>
              <span>{{ form.fapproveDate }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>是否生成OQC质检单：</span>
              <span>{{ form.isGenerateQuality == '0' ? '否' : '是' }}</span>
            </div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>OQC质检单号：</span>
              <span>{{ form.oqcCode || '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>是否完成质检单：</span>
              <span>{{ form.isFinishQuality == '0' ? '否' : '是' }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>是否生成出库单：</span>
              <span>{{ form.isGenerateWarehousing == '0' ? '否' : '是' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-tag size="large" style="font-size: 20px; margin-bottom: 10px; margin-top: 10px">产品列表</el-tag>
        <hr />
        <el-table v-loading="loading" :data="routeproductbomList">
          <el-table-column label="序号" align="center" width="50px" prop="issueCode">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" prop="productCode" />
          <el-table-column label="产品名称" align="center" prop="productName" />
          <el-table-column label="规格型号" align="center" prop="specification" />
          <el-table-column label="单位" width="100" align="center" prop="unitOfMeasure" />
          <el-table-column label="数量" width="100" align="center" prop="fqty" />
          <!-- <el-table-column label="订单单号" width="120" align="center" prop="forderNo" /> -->
          <el-table-column label="批次号" width="100" align="center" prop="flot" />
          <el-table-column label="合同号" width="100" align="center" prop="ftbibText4" />
          <el-table-column label="是否完成质检单" width="150" align="center" prop="isFinishQuality">
            <template slot-scope="scope">
              <span>{{ scope.row.isFinishQuality == '0' ? '否' : '是' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="质检合格数量" align="center" width="150px" prop="qualifiedQuantity" />
          <el-table-column label="质检不合格数量" align="center" width="150px" prop="unqualifiedQuantity" />
          <el-table-column label="备注" width="80" align="center" prop="fnoteEntry" />
        </el-table>

        <hr />
        <el-tag size="large" style="font-size: 20px; margin-bottom: 10px; margin-top: 10px">请检单详情</el-tag>
        <hr />
        <!-- 请检单编号、单据日期、单据状态、客户、合同号、技术分解单号、请检人、请检时间、检验结果 -->
        <el-table v-loading="loading1" :data="workorderDataList" default-expand-all>
          <el-table-column type="index" width="50" label="序号"></el-table-column>

          <el-table-column label="请检单编号" align="center" prop="checkCode" />
          <el-table-column label="单据日期" align="center" prop="createTime" />
          <el-table-column label="单据状态" align="center" prop="status">
            <template slot-scope="scope">
              <span> {{ scope.row.status == 0 ? "待请检" : scope.row.status == 1 ? "未检验" : scope.row.status == 2 ? "已检验" : "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户" align="center" prop="attr1"></el-table-column>

          <el-table-column label="合同号" align="center" prop="ftbibText4"></el-table-column>
          <el-table-column label="产品编码" align="center" prop="productCode"></el-table-column>
          <el-table-column label="产品名称" align="center" prop="productName"></el-table-column>
          <el-table-column label="规格型号" align="center" prop="specification"></el-table-column>
          <el-table-column label="技术分解单号" align="center" prop="attr3"></el-table-column>

          <el-table-column label="请检人" align="center" prop="createBy"></el-table-column>

          <!-- <el-table-column label="领料仓库" align="center" prop="fstockName">
            <template slot-scope="scope">
              <div>
                <el-select
                  v-model="scope.row.fstockName"
                  placeholder="请选择领料仓库"
                  :key="scope.row.itemCode"
                  style="width: 120px"
                  @change="(e) => fstockChage(e, scope.row, scope.$index)"
                >
                  <el-option
                    v-for="item in scope.row.bdInventoryList"
                    :key="item.fstockId "
                    :label="item.fstockName"
                    :value="item.fstockName"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="批次号" align="center" prop="proFlotInfoDtoList">
            <template slot-scope="scope">
              <el-input
                style="width: 120px"
                v-model="scope.row.batchCode"
                :controls="false"
                @focus="(e) => serialQuery(e, scope.row, scope.$index)"
              ></el-input>
            </template>
          </el-table-column>-->

          <el-table-column label="请检时间" align="center" prop="createTime"></el-table-column>
          <el-table-column label="批次号" align="center" prop="flot"></el-table-column>
          <el-table-column label="批次号名称" align="center" prop="lotName"></el-table-column>
          <el-table-column label="检验数量" align="center" prop="pleaseCheckQuantity"></el-table-column>
          <el-table-column label="检验结果" align="center" prop="attr2"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="checkPlease(scope.row)"
                v-if="scope.row.attr4 == '8'">报检</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  selectListDeliverynotice,
  inspectionSubmission,
  getGoods,
  delGoods,
  addGoods,
  updateGoods
} from "@/api/mes/wm/deliveryGoods";
export default {
  name: "receiptDetails",
  dicts: ["mes_workorder_status", "sys_fentry_status"],
  data() {
    return {
      // 是否显示弹出层
      showFlag: false,
      // 遮罩层
      loading: false,
      loading1: false,
      // 选中数组
      ids: [],
      id: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 生产补料详细信息表格数据
      detailList: [],
      // 弹出层标题
      title: "",

      //勾选的内容
      selectData: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        id: null,
        suppyTime: null,
        workorderCode: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //审批人
      personList: [],
      //处于哪个环节
      activeStep: null,
      stepResult: null,
      warehouseList: [],
      routeproductbomList: [],
      //请检的详情
      workorderDataList: []
    };
  },
  created() { },
  methods: {
    init(row) {
      console.log(row, "子组件的row");
      this.form = row;
      //调接口需要的id
      this.id = row.fid;
      this.showFlag = true;
      this.getDetail();
    },
    getDetail() {
      this.loading = true;
      this.loading1 = true;
      selectListDeliverynotice(this.id).then(response => {
        this.routeproductbomList = response.data || {};
        this.workorderDataList = response.wmPleaseChecks;
        this.loading = false;
        this.loading1 = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        materialSerial: null,
        productCode: null,
        productName: null,
        productSpec: null,
        measureName: null,
        itemAmount: null,
        id: null,
        suppyTime: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null
      };
      this.personList = [];
      //处于哪个环节
      this.activeStep = null;
      this.stepResult = null;
      this.warehouseList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 报检接口
    checkPlease(row) {
      this.$modal
        .confirm(
          '是否确认请检单编号为"' +
          row.checkCode +
          '"的单号重新报检!'
        )
        .then(function () {
          return inspectionSubmission(row);
        })
        .then(() => {
          this.getDetail();
          // this.$modal.msgSuccess(this.domsg1);
        })
        .catch(() => { });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}

.tabsDiv {
  padding: 20px;
  padding-top: 0;
}

.tabsDiv ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
  font-weight: 700;
  font-size: 18px;
}

.drawerFooter {
  text-align: right;
  padding: 20px;
}

.bg-purple {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 30px;
  // span:nth-child(1) {
  //   display: inline-block;
  //   width: 160px;
  //   white-space: nowrap;
  //   line-height: 30px;
  // }
}

.dialog-footer {
  padding-top: 20px;
  text-align: center;
}

.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}
</style>